import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import { Link } from 'react-router'

import { Table, Menu, Popconfirm, message, Tag } from 'antd';


import postActions from '../action'
import appActions from '../../app/action'

import {dateToString} from '../../../util/index';

export class Post extends Component {

  constructor (props) {
    super(props);

    const type = this.props.post.get('posttype') || 'post';

    /**
     * table头部
     * @type {*[]}
     */
    this.columns = [{
      title: '页面标题',
      dataIndex: 'post_title',
      key: 'title',
      render : (text,record) => {
        return (
          <Link to={ "/post/"+record._id }>{text}</Link>
        )
      }
    }, {
      title: '发布人',
      dataIndex: 'post_author',
      key: 'author',
      render : (doc) => {
        return (
          <Link to={ "/post/"+doc._id }>{doc.user_nickname}</Link>
        )
      }
    },{
      title: '当前分类',
      dataIndex: 'post_term',
      key: 'term',
      render : (doc) => {
        return (
          <Tag color="#87d068">{doc.term_name}</Tag>
        )
      }
    },{
      title: '当前状态',
      width: 90,
      dataIndex: 'post_status',
      key: 'status',
      render : (text) => {
        let statusObj = {
          '-1' : {
            color : '#f50',
            content : '已删除'
          },
          '0' : {
            color : '#87d068',
            content : '已发布'
          },
          '1' : {
            color : '#108ee9',
            content : '草稿'
          }
        };

        return (
          <span style={{color:statusObj[text].color}}>{statusObj[text].content}</span>
        ) ;
      }
    },{
      title: '发布时间',
      dataIndex: 'post_date',
      key: 'date',
      render : (text) => {
        return dateToString(text);
      }
    },{
      title: '修改时间',
      dataIndex: 'post_modified',
      key: 'modify',
      render : (text) => {
        return dateToString(text);
      }
    }, {
      title : '操作',
      key : 'handle',
      render: (text,record,index) => {
        return (
          <span>
            <Link to={ "/post/edit/"+record._id }>编辑</Link>
            <span className="ant-divider" />
            {
              type === 'trash' ?
                <Popconfirm title="确定恢复此文章么?" onConfirm={this.handlePostRecover.bind(this,record,index)} >
                  <a href="#">恢复</a>
                </Popconfirm> :
                <Popconfirm title="确定删除此文章么?" onConfirm={this.handlePostTrash.bind(this,record,index)} >
                  <a href="#">删除</a>
                </Popconfirm>
            }

            {
              type === 'trash' && <span className="ant-divider" />
            }
            {
              type === 'trash' && <Popconfirm title="删除后无法恢复,确定删除?" onConfirm={this.handlePostDelete.bind(this,record,index)} >
                <a href="#">彻底删除</a>
              </Popconfirm>
            }

          </span>
        )
      },
    }];
  }

  componentDidMount () {

    console.log('ddddddddddddddddddddddddddddddddd1111');

    const type = this.props.post.get('posttype');
    this.getPostList({
      page : 1,
      type
    });
  }

  /**
   * 获取文章列表
   */
  getPostList (params) {
    const { appActions, postActions } =  this.props;

    appActions.loading(true).then(()=>{
      return postActions.getList(params)
    }).then(()=>{
      appActions.loading(false);
    }).catch(err=>{
      message.error(err.msg);
    })
  }

  /**
   * 菜单点击操作
   * @param e
   */
  handleMenuClick (e) {
    this.getPostList({
      page : 1,
      type : e.key
    });
  }


  /**
   * 分页改变
   * @param page
   */
  handleTableChange (pagination) {

    console.log('分页改变');

    const type = this.props.post.get('posttype');
    this.getPostList({
      page : pagination.current,
      type
    });
  }
  

  /**
   * 操作删除到回收站
   * @param _id
   */
  handlePostTrash (formdata,index) {
    this.props.postActions.postTrashPost({
      index,
      _id : formdata._id,
    }).then(data=>{
      message.success('删除成功');
    }).catch(err=>{
      message.error(err.msg);
    })
  }

  /**
   * 操作彻底删除文章
   * @param _id
   */
  handlePostDelete (formdata,index) {
    this.props.postActions.postDeletePost({
      index,
      _id : formdata._id,
    }).then(data=>{
      message.success('彻底删除成功');
    }).catch(err=>{
      message.error(err.msg);
    })
  }

  /**
   * 操作恢复文章
   * @param _id
   */
  handlePostRecover (formdata,index) {
    this.props.postActions.postRecoverPost({
      index,
      _id : formdata._id,
    }).then(data=>{
      message.success('恢复成功');
    }).catch(err=>{
      message.error(err.msg);
    })
  }



  render() {
    const {post} = this.props;
    const type = post.get('posttype') || 'post';
    const list = post.get('postlist') && post.get('postlist').toArray();
    const pagination = post.get('pagination') && post.get('pagination').toJS();

    console.log(pagination);

    if(this.props.children){
      return (
        <div>
          {this.props.children}
        </div>
      )
    }else{
      return (
        <div>
          <Menu onClick={this.handleMenuClick.bind(this)}
                selectedKeys={[type]}
                mode="horizontal">
            <Menu.Item key="post">
              文章列表
            </Menu.Item>
            <Menu.Item key="trash" style={{marginLeft: 20}}>
              回收站文章
            </Menu.Item>
          </Menu>

          <Table
            bordered
            columns={this.columns}
            dataSource={list}
            className="mt20"
            pagination={pagination}
            onChange={this.handleTableChange.bind(this)}
          />
        </div>
      )
    }
  }

}

export default connect((state)=>{
  return  {
    post : state.get('post')
  }
},dispatch => {
  return {
    postActions : bindActionCreators(postActions, dispatch),
    appActions : bindActionCreators(appActions, dispatch)
  }
})(Post);
